New: Add margin start and margin end column classes (fixes #504) #505
Conversation
swashbuck
changed the title
|
Lovely work @swashbuck 👍 |
|
Why calling them pull and push and not margin left and right?
|
I'd agree. Perhaps margin start and margin end to align with the CSS? |
@oliverfoster Since these classes can be used with RTL layouts, "left" and "right" would not work. As for "push" and "pull", these were the names that Bootstrap used for the same sort of utility class. So, my thought was that they would be familiar to developers who have used Bootstrap. However, they may be deprecated in the newest version(s).
@kirsty-hames Yep, I'm fine with this if everyone else is? "Start" and "end" would make sense with both RTL and LTR. Something like this then?
|
|
Yep, deprecated as of v4:
Of course, by no means do we need to follow Bootstrap's conventions. |
To do:
|
swashbuck
changed the title
|
Class names have been updated. Ready for re-review. |
|
🎉 This PR is included in version 9.18.0 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
Fixes #504
New
margin-start-sm-2andmargin-end-md-1) for indenting components from the left or right.Testing
Configure two single width components using the existing column classes and the new margin classes. For example, in the same block:
Single width Text component
Add classes
col-md-5 margin-start-md-1. This makes the component 5 columns wide with a 1 column margin from the left at the medium breakpoint and higher.Single width Graphic component
Add classes
col-md-4 margin-end-md-1. This makes the component 4 columns wide with a 1 column margin from the right at the medium breakpoint and higher.The result for the above would look something like the following (gray block background color and guidelines added for illustrative purposes):
The number of columns + starting/ending margins must add up to the total number of columns (or less) which is 12 unless redefined in the theme.
Additional work
The theme wiki should be updated with these new classes.